<template>
  <div class="box">
    <div class="topboxone">
      <el-button type="primary" @click="addbutton">新增预约</el-button>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist" border style="width: 100%" max-height="500" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="date" label="患者姓名" width="120">
            <template #default="scope">
              <span class="hzbox" @click="hzxqbutton(scope.row)">{{ scope.row.patientName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="doctorName" label="主治医师" width="120" />
          <el-table-column prop="appointmentDate" label="预约日期" />
          <el-table-column prop="statusName" label="预约状态" />
          <el-table-column prop="typeName" label="预约类型" />
          <el-table-column prop="timeSlot" label="预约时段" />
          <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
        </el-table>
        <div class="fybox">
          <el-pagination
            v-model:current-page="formInline.pageNum"
            v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager"
            :total="pagetotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="title" width="600" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef">
        <el-form-item label="预约日期" prop="appointmentDate">
          <el-date-picker v-model="ruleForm.appointmentDate" value-format="YYYY-MM-DD" type="date" style="width: 120px" />
        </el-form-item>

        <el-form-item label="预约状态" prop="appointmentStatus">
          <el-select v-model="ruleForm.appointmentStatus" placeholder="">
            <el-option v-for="item in yyztlist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="预约类型" prop="appointmentType">
          <el-select v-model="ruleForm.appointmentType" placeholder="">
            <el-option v-for="item in yylxlist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="预约时段" prop="remark">
          <el-time-picker
            :teleported="false"
            v-model="ruleForm.timeSlotone"
            :picker-options="pickerOptions"
            style="width: 150px"
            value-format="HH:mm"
          ></el-time-picker>
          <el-time-picker
            :teleported="false"
            v-model="ruleForm.timeSlottwo"
            :picker-options="pickerOptions"
            style="width: 150px; margin-left: 10px"
            value-format="HH:mm"
          ></el-time-picker>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  jzgllistApitwo,
  addjzglApi,
  xgjzglApi,
  deletejzglApi,
  getInfojzglApi,
  getDiabetesAmount,
  getMonthlyGrowth
} from "@/api/jzglmange/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
const route = useRoute();
const routedata = reactive(route.query);
const YZlist = JSON.parse(sessionStorage.getItem("YZlist"));
const parentlist = JSON.parse(sessionStorage.getItem("patientInfo"));
let yyztlist = ref([]); //预约状态
let yylxlist = ref([]); //预约类型
let sfstatus = ref([]); //随访状态
yyztlist.value = YZlist.appointment_status;
yylxlist.value = YZlist.appointment_type;
sfstatus.value = YZlist.follow_up_status;
const ruleFormRef = ref();
const router = useRouter();
var ruleForm = ref({
  patientId: parentlist.id,
  doctorId: parentlist.doctorId
});
let title = ref("新增预约");
const formInline = ref({
  appointmentStatus: "",
  appointmentType: "",
  doctorId: "",
  timeSlot: "",
  appointmentDate: ""
});
const pickerOptions = {
  selectableRange: "00:00:00 - 23:59:59"
};

let dialogVisible = ref(false);
let datalist = ref([]);
var pagetotal = ref(0);
const options = [];
let currentPage = ref(1);
let pageSize = ref(10);
let handleSizeChange = () => {
  // getlist();
};
let handleCurrentChange = () => {
  // getlist();
};
let hzxqbutton = e => {
  router.push({
    path: "/hzinfo",
    query: e
  });
};
const form = reactive({
  sbh: "",
  name: "",
  phone: "",
  xty: ""
});
const ydzbutton = e => {
  getInfojzglApi({
    id: e
  }).then(res => {
    let dataxg = res.data;
    dataxg.appointmentStatus = "1"; //改成已到诊
    xgjzglApi(dataxg).then(() => {
      ElMessage({
        message: "修改成功",
        type: "success"
      });
      getlist();
    });
  });
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
getlist();
// 获取字典列表
function getlist() {
  if (formInline.value.timeSlotone && formInline.value.timeSlottwo) {
    formInline.value.timeSlot = formInline.value.timeSlotone + "-" + formInline.value.timeSlottwo;
  } else {
    formInline.value.timeSlot = "";
  }

  formInline.value.patientId = routedata.id;

  jzgllistApitwo(formInline.value).then(res => {
    datalist.value = res.data;
    pagetotal.value = res.total;
  });
}
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
const handleClose = done => {
  dialogVisible.value = false;
};
const addbutton = () => {
  title.value = "新增预约";
  ruleForm.value = {
    patientId: parentlist.id,
    doctorId: parentlist.doctorId
  };

  xgstatus.value == false;
  dialogVisible.value = true;
};
let xgstatus = ref(false);
function savebutton(formEl) {
  ruleForm.value.timeSlot = ruleForm.value.timeSlotone + "-" + ruleForm.value.timeSlottwo;
  if (xgstatus.value == true) {
    xgjzglApi(ruleForm.value).then(() => {
      ElMessage({
        message: "修改成功",
        type: "success"
      });
      formEl.resetFields();
      dialogVisible.value = false;
      xgstatus.value = false;
      //刷新列表数据
      getlist();
    });
  } else {
    //新增
    addjzglApi(ruleForm.value).then(() => {
      ElMessage({
        message: "新增成功",
        type: "success"
      });
      formEl.resetFields();
      dialogVisible.value = false;
      getlist();
    });
  }
}
const deletebutton = () => {
  if (selection.value.length == 1) {
    ElMessageBox.confirm("确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deletejzglApi({
        id: selection.value[0].id
      }).then(res => {
        ElMessage({
          type: "success",
          message: `${res.msg}`
        });
        getlist();
      });
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
let doctorList = ref("");
let hznamelist = ref("");
getPersonList();
function getPersonList() {
  //医生
  getDiabetesAmount({}).then(res => {
    doctorList.value = res.data;
  });
  //患者
  getMonthlyGrowth({}).then(res => {
    hznamelist.value = res.data;
  });
}
</script>

<style scoped>
.box {
  color: #606266;
}
.topbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.savrnutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.topboxone {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
